<template>
  <view class="wrap" @click="handleCloseTips">
    <view class="contents">
      <view class="roleBox">
        <view class="roleCard">{{ navTitle + "-统计" }}</view>
        <view
          class="changeBtn"
          v-if="findRoute('mystatistics_project_switch') && !childDeep"
          @click="changeMember"
        >
          <image src="@/static/images/index/change.svg" mode=""></image>
          <view class="">切换</view>
        </view>
      </view>
      <!-- 即将到期 -->
      <view class="card" v-if="findRoute('mystatistics_project_exs')">
        <view class="card-title">即将到期</view>
        <view class="" v-if="d1.chartData.series.length > 0">
          <view class="info-view">
            <view class="info-view-item">
              <view class="num red">{{ d1.value1 }}</view>
              <view class="name red">即将到期项目</view>
            </view>
            <view class="info-view-line"></view>
            <view class="info-view-item">
              <view class="num red">
                {{ d1.value2 }}
                <text>台</text>
              </view>
              <view class="name red">电梯数量</view>
            </view>
          </view>
          <view class="charts">
            <l-echart class="ring" ref="d1"></l-echart>
            <view class="data-lable">
              <view
                class="data-lable-item"
                v-for="(item, index) in d1.chartData.series"
                :key="index"
                @click="selectLegend(item, 'd1')"
              >
                <view
                  class="color"
                  :style="{ background: item.show ? d1.colors[index] : '#ccc' }"
                >
                </view>
                <view class="name">{{ item.name }}</view>
                <view class="eleTotal">{{ item.data }}%</view>
                <view class="num">{{ item.eleTotal }}台</view>
              </view>
            </view>
          </view>
          <view
            class="detail"
            @click="toDetail({ key: 'contractStatus', value: [3] })"
          >
            详情
            <text class="next"></text>
          </view>
        </view>
        <view class="chartEmpty" v-else>
          <image src="/static/images/index/empty1.png" mode=""></image>
          <view class="">暂无数据</view>
        </view>
      </view>
      <!-- 到期未签 -->
      <view class="card" v-if="findRoute('mystatistics_project_notsigned')">
        <view class="card-title">到期未签</view>
        <view v-if="d2.chartData.series.length > 0">
          <view class="info-view">
            <view class="info-view-item">
              <view class="num red">{{ d2.value1 }}</view>
              <view class="name red">到期未签项目</view>
            </view>
            <view class="info-view-line"></view>
            <view class="info-view-item">
              <view class="num red">
                {{ d2.value2 }}
                <text>台</text>
              </view>
              <view class="name red">电梯数量</view>
            </view>
          </view>
          <view class="charts">
            <view class="chartsContent">
              <l-echart class="ring" ref="d2"></l-echart>
            </view>

            <view class="data-lable">
              <view
                class="data-lable-item"
                v-for="(item, index) in d2.chartData.series"
                :key="index"
                @click="selectLegend(item, 'd2')"
              >
                <view
                  class="color"
                  :style="{ background: item.show ? d2.colors[index] : '#ccc' }"
                >
                </view>
                <view class="name">{{ item.name }}</view>
                <view class="eleTotal">{{ item.data }}%</view>
                <view class="num">{{ item.eleTotal }}台</view>
              </view>
            </view>
          </view>
          <view
            class="detail"
            @click="toDetail({ key: 'contractStatus', value: [1] })"
          >
            详情
            <text class="next"></text>
          </view>
        </view>
        <view class="chartEmpty" v-else>
          <image src="/static/images/index/empty1.png" mode=""></image>
          <view class="">暂无数据</view>
        </view>
      </view>
      <!-- 项目统计 -->
      <view class="card" v-if="findRoute('mystatistics_project_count')">
        <view class="card-title">{{(statisticalData.groupList?'所在部门':'个人')+'维保电梯项目总量'}}
            <view class="tips">
                    <zb-tooltip
                placement="top"
                ref="tooltip"
                right="50"
                arrow-left="100"
              >
                <image class="msg" src="@/static/images/msg.png"></image>
                <view class="tipsContent" slot="content">
                  <view class="">{{ (statisticalData.groupList?'你所在的公司':'你所')+'做过的工单涉及的项目、电梯数量统计' }}
                    </view>
                </view>
              </zb-tooltip>
                </view>
        </view>
        <view v-if="d3.chartData.series.length > 0">
          <view class="info-view">
            <view class="info-view-item">
              <view class="num">{{ d3.value1 }}</view>
              <view class="name">项目数量
               
              </view>
            
            </view>
            <view class="info-view-line"></view>
            <view class="info-view-item">
              <view class="num">
                {{ d3.value2 }}
                <text>台</text>
              </view>
              <view class="name">电梯数量</view>
            </view>
          </view>

          <view class="charts">
            <view class="chartsContent">
              <l-echart class="ring" ref="d3"></l-echart>
            </view>
            <view class="data-lable">
              <view
                class="data-lable-item"
                v-for="(item, index) in d3.chartData.series"
                :key="index"
                @click="selectLegend(item, 'd3')"
              >
                <view
                  class="color"
                  :style="{ background: item.show ? d3.colors[index] : '#ccc' }"
                >
                </view>
                <view class="name">{{ item.name }}</view>
                <view class="eleTotal">{{ item.data }}%</view>
                <view class="num">{{ item.eleTotal }}台</view>
              </view>
            </view>
          </view>
          <view
            class="detail"
            @click="toDetail({ key: 'contractStatus', value: [] })"
          >
            详情
            <text class="next"></text>
          </view>
        </view>

        <view class="chartEmpty" v-else>
          <image src="/static/images/index/empty1.png" mode=""></image>
          <view class="">暂无数据</view>
        </view>
      </view>
      <view class="card" v-if="findRoute('mystatistics_project_review')">
        <view class="card-title">年审梯分布</view>
        <view v-if="d4.chartData.series.length > 0">
          <view class="charts">
            <l-echart class="ring" ref="d4"></l-echart>

            <view class="data-lable">
              <view
                class="data-lable-item"
                v-for="(item, index) in d4.chartData.series"
                :key="index"
                @click="selectLegend(item, 'd4')"
              >
                <view
                  class="color"
                  :style="{ background: item.show ? d4.colors[index] : '#ccc' }"
                >
                </view>
                <view class="name">{{ item.name }}</view>
                <view class="eleTotal">{{ item.data }}%</view>
                <view class="num">{{ item.eleTotal }}台</view>
              </view>
            </view>
          </view>
          <view
            class="detail"
            @click="toDetail({ key: 'useTypes', value: [0, 1] })"
          >
            详情
            <text class="next"></text>
          </view>
        </view>
        <view class="chartEmpty" v-else>
          <image src="/static/images/index/empty1.png" mode=""></image>
          <view class="">暂无数据</view>
        </view>
      </view>
      <!-- 品牌分布 -->
      <view class="card" v-if="findRoute('mystatistics_project_brand')">
        <view class="card-title">品牌分布</view>
        <view v-if="d5.chartData.series.length > 0">
          <view class="info-view">
            <view class="info-view-item">
              <view class="num">{{ d5.value1 }}</view>
              <view class="name">品牌</view>
            </view>
            <view class="info-view-line"></view>
            <view class="info-view-item">
              <view class="num">
                {{ d5.value2 }}
                <text>台</text>
              </view>
              <view class="name">电梯数量</view>
            </view>
          </view>
          <view class="charts">
            <l-echart class="ring" ref="d5"></l-echart>

            <view class="data-lable">
              <view
                class="data-lable-item"
                v-for="(item, index) in d5.chartData.series"
                :key="index"
                @click="selectLegend(item, 'd5')"
              >
                <view
                  class="color"
                  :style="{ background: item.show ? d5.colors[index] : '#ccc' }"
                >
                </view>
                <view class="name">{{
                  item.name == null ? "无" : item.name
                }}</view>
                <view class="eleTotal">{{ item.data }}%</view>
                <view class="num">{{ item.eleTotal }}台</view>
              </view>
            </view>
          </view>
          <view class="detail" @click="brandToDetail">
            详情
            <text class="next"></text>
          </view>
        </view>
        <view class="chartEmpty" v-else>
          <image src="/static/images/index/empty1.png" mode=""></image>
          <view class="">暂无数据</view>
        </view>
      </view>
    </view>

    <view class="footer-block"></view>
    <timeFilter> </timeFilter>
  </view>
</template>

<script>
import * as echarts from '@/subpages/components/lime-echart/static/echarts.min';
import LEchart from '@/subpages/components/lime-echart/components/l-echart/l-echart.vue';
import timeFilter from './components/card-template/timeFilter.vue';
import { mapState, mapActions } from 'vuex';
// import Header from '@/pages/index/components/header.vue';
import { ringOpt, pieOpt } from './utils/chart_opt.js';
import {
	comingExpiryProject,
	expiryProject,
	projectElevator,
	projectElevatorUseType,
	brandElevator,
} from '@/apis/statistic.js';
import { hanleToken } from '@/utils/utils.js';
export default {
	components: { LEchart, timeFilter },
	props: {
		childDeep: {
			type: [Number, String],
			default: 0,
		},
	},
	data() {
		return {
			statisticalData:{},
			selectTimePopup: false,
			chartMaps: {
				d1: null,
				d2: null,
				// d3: null,
				d3: null,
				d4: null,
			},
			d1: {
				// 即将到期项目
				colors: [
					'#47C8A3',
					'#61D341',
					'#9DD44A',
					'#B3E557',
					'#DDF474',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				value1: 0,
				value2: 0,
				chartData: { series: [] },
				opts: {},
				title: '',
				subtitle: '',
				chart: null,
			},

			d2: {
				// 到期未签项目
				colors: [
					'#EE917C',
					'#EEA87C',
					'#FFC582',
					'#FFDC82',
					'#FFE772',
					'#FFF772',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				value1: 0,
				value2: 0,
				chartData: { series: [] },
				opts: {},
				title: '',
				subtitle: '',
			},

			d3: {
				// 项目总数统计
				colors: [
					'#6FA9FF',
					'#6FCDFF',
					'#87DDE7',
					'#6AF0C2',
					'#94EA87',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				value1: 0,
				value2: 0,
				chartData: { series: [] },
				opts: {},
				title: '',
				subtitle: '',
			},
			d4: {
				// 年审类型统计
				colors: [
					'#73A0FA',
					'#73DEB3',
					'#87DDE7',
					'#6AF0C2',
					'#94EA87',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				value1: 0,
				value2: 0,
				chartData: { series: [] },
				opts: {},
				title: '',
				subtitle: '',
			},

			d5: {
				// 品牌统计
				colors: [
					'#7264DA',
					'#A764DA',
					'#C764DA',
					'#EB87D1',
					'#EB87A9',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				value1: 0,
				value2: 0,
				chartData: { series: [] },
				opts: {},
			},

			tabIdx: 0,
			filterList: [
				{
					id: 3,
					name: '本月',
				},
				{
					id: 4,
					name: '自定义',
				},
			],

			obj: {
				startDate: '',
				endDate: '',
				size: 999,
			},
			userIds: '',
			navTitle: '',
			customDate: '',
			headerIndex: 2,

			// oldHeaderIndex: 2,
			pageScrollTop: '',
			safeAreaBottom: 0,
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	async mounted() {
		uni.$on('setDatas', this.initData);
		this.initData();
	},
	beforeDestroy() {
		uni.$off('setDatas');
	},

	onUnload() {
		// 暂时先清除考勤统计缓存2022-09-03 下个版本会更改
		hanleToken('remove', 'statisticalSign');

		// 如果下转模式 清除当前层级缓存

		if (this.childDeep > 0) {
			uni.removeStorage({
				key: 'statistical' + (this.childDeep > 0 ? this.childDeep : ''),
				success: () => {
					console.log('清除缓存成功', this.childDeep);
				},
			});
		}
	},
	onLoad(os) {
		this.getRoutes();
		if (os.tabIdx) {
			this.tabIdx = os.tabIdx;
		}
		uni.getSystemInfo({
			success: (res) => {
				console.log(res, 666);
				this.safeAreaBottom = res.screenHeight - res.safeArea.bottom;
				// console.log(this.safeAreaBottom,9999,"底部距离");
			},
		});
	},

	methods: {
		...mapActions('user', ['handleRreshToken', 'getRoutes']),
		handleCloseTips() { 
			uni.$emit('tooltipsClose');
		},
		initData() {
			const key = 'statistical' + (this.childDeep > 0 ? this.childDeep : '');
			uni.getStorage({
				key: key,
				success: (res) => {
					console.log('数据源', res);
					this.statisticalData = res.data;
					this.userIds = res.data.id.split(',');
					this.navTitle = res.data.title;
					this.getD1();
					this.getD2();
					this.getD3();
					this.getD4();
					this.getD5();
				},
				fail: (err) => {
					console.log('statistical', key, err);
				},
			});
		},
		// 切换人员
		changeMember() {
			// hanleToken('set','statisticalTabIndex',0)
			uni.navigateTo({
				url: '/pages/memberSelect/memberSelect',
			});
		},

		// 点击取消图例
		selectLegend(item, type) {
			let list = this[type].chartData.series;
			item.show = !item.show;

			let newList = list.filter((e) => e.show);
			if (!newList.length) {
				return;
			} else {
				this.setRingChart(type);
			}
		},
		handleClickTab(res) {
			this.tabIdx = res;
			hanleToken('set', 'statisticalTabIndex', res);
			if (res == 1) {
				if (this.customDate !== '') {
					this.headerIndex = 3;
					// this.customDate = this.customDate;
					console.log('重新设置headerIndex');
				}
			}
		},

		// 去项目详情页面
		toDetail(k) {
			console.log(k, 'k的值');
			uni.navigateTo({
				url:
          '/pageModules/myElevator/myElevator?data=' + JSON.stringify({ ...k }),
			});
		},
		brandToDetail() {
			let arr = this.d5.chartData.series
				.filter((item) => {
					return item.id !== undefined;
				})
				.map((e) => {
					return e.id;
				});
			console.log(this.d5.chartData.series, arr, 6666);
			// return
			uni.navigateTo({
				url:
          '/pageModules/myElevator/myElevator?data=' +
          JSON.stringify({ key: 'brandIds', value: arr }),
			});
		},

		// 即将到期项目
		async getD1() {
			let res = await comingExpiryProject(this.userIds);
			console.log(res);
			if (res.data) {
				// this.d1.opts = ringOpt({ color: this.d1.colors, title: { name: res.data.value2 } });
				let list = [];
				for (let i = 0; i < res.data.items.length; i++) {
					list.push({
						name: res.data.items[i].name,
						// 百分比
						eleTotal: res.data.items[i].eleTotal,
						// 数量
						data: res.data.items[i].percentage,
						show: true,
					});
				}
				// { value: 1048, name: '搜索引擎' }

				// console.log(111, list);
				this.d1.chartData.series = list;
				this.d1.value1 = res.data.value1;
				this.d1.value2 = res.data.value2;
				// this.setRingChart('d1')

				this.setRingChart('d1');
			}
		},
		// 绘制环形图
		setRingChart(chart) {
			let list = this[chart].chartData.series;
			let chartData = [];
			for (let i = 0; i < list.length; i++) {
				if (list[i].show) {
					chartData.push({
						value: list[i].data,
						name: list[i].name || '无',
					});
				}
			}
			console.log('setRingChart', chart, chartData, this[chart].chartData);
			this[chart].opts = ringOpt({
				color: this[chart].colors,
				data: chartData,
				type: chart == 'd4' ? 'pie' : 'ring',
			});
			this.$nextTick(() => {
				if (!this.$refs[chart]) {
					return;
				}
				this.$refs[chart].init(echarts, (chartF) => {
					// this.chartMaps[chart] = chartF
					chartF.setOption(this[chart].opts);

					chartF.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: 0,
					});
					chartF.on('legendselectchanged', () => {
						// 处理图例点击导致选中与默认选中重叠问题
						chartF.dispatchAction({ type: 'downplay', seriesIndex: 0 });
					});
					chartF.on('mouseover', (e) => {
						// 当鼠标移除的时候 使默认的索引值去除默认选中
						if (e.dataIndex !== 0) {
							chartF.dispatchAction({ type: 'downplay', dataIndex: 0 });
						}
					});
				});
			});
		},

		// 到期未签项目
		async getD2() {
			let res = await expiryProject(this.userIds);
			console.log(res);
			if (res.data) {
				// this.d2.opts = ringOpt({ color: this.d2.colors, title: { name: res.data.value2 } });
				// this.d3.opts = ringOpt({ color: this.d2.colors, title: { name: list[0].eleTotal + '%' }, subtitle: { name: list[0].name } });

				let list = [];
				for (let i = 0; i < res.data.items.length; i++) {
					list.push({
						name: res.data.items[i].name,
						eleTotal: res.data.items[i].eleTotal,
						data: res.data.items[i].percentage,
						show: true,
					});
				}
				if (list.length) {
					this.d2.opts = ringOpt({
						color: this.d2.colors,
						title: { name: list[0].eleTotal + '%' },
						subtitle: { name: list[0].name },
					});
				}

				this.d2.chartData.series = list;
				this.d2.value1 = res.data.value1;
				this.d2.value2 = res.data.value2;
				this.setRingChart('d2');
			}
		},

		// 项目数量统计
		async getD3() {
			let res = await projectElevator(this.userIds);
			if (res.data) {
				let list = [];
				for (let i = 0; i < res.data.items.length; i++) {
					list.push({
						name: res.data.items[i].name,
						// 数量
						eleTotal: res.data.items[i].eleTotal,
						// 百分比
						data: res.data.items[i].percentage,
						show: true,
					});
				}
				// this.d3.opts = ringOpt({ color: this.d3.colors });

				this.d3.chartData.series = list;
				this.d3.value1 = res.data.value1;
				this.d3.value2 = res.data.value2;
				this.setRingChart('d3');
			}
		},

		async getD4() {
			let res = await projectElevatorUseType(this.userIds);
			if (res.data) {
				this.d4.opts = pieOpt({
					color: this.d4.colors,
					dataLabel: false,
					title: { show: false },
				});
				let list = [];
				for (let i = 0; i < res.data.length; i++) {
					list.push({
						name: res.data[i].name,
						// 数量
						data: res.data[i].percentage,
						// 百分比
						eleTotal: res.data[i].eleTotal,
						typeName: '台',
						show: true,
					});
				}
				this.d4.chartData.series = list;
				this.setRingChart('d4');
			}
		},

		// 项目品牌统计
		async getD5() {
			let res = await brandElevator(this.userIds);
			if (res.data) {
				// this.d5.opts = ringOpt({ color: this.d5.colors, title: { name: res.data.value2 } });
				let list = [];
				for (let i = 0; i < res.data.items.length; i++) {
					list.push({
						name: res.data.items[i].name,
						id: res.data.items[i].id,
						// 数量
						eleTotal: res.data.items[i].eleTotal,
						// 百分比
						data: res.data.items[i].percentage,
						show: true,
					});
				}
				this.d5.chartData.series = list;
				this.d5.value1 = res.data.value1;
				this.d5.value2 = res.data.value2;
				this.setRingChart('d5');
			}
		},
		toNext() {
			uni.navigateBack({
				// delta:1
			});
		},

		// 去保养列表页面
		toMaintenanceList(res) {
			const { startDate, endDate } = this.obj;
			console.log(startDate, endDate, 999);
			console.log(
				startDate ? { ...res, startTime: startDate, endTime: endDate } : res
			);
			// return
			uni.navigateTo({
				url: '/subpages/maintenanceStatistics/index?data=' + JSON.stringify(startDate ? { ...res, startTime: startDate, endTime: endDate } : res)
			});
		},
	},
};
</script>

<style lang="scss">
.wrap {
  width: 100%;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.footer-block {
  width: 100%;
  height: 120rpx;
}

.details {
  color: #0091ff;
  font-size: 26rpx;
  margin: 20rpx 0;
  text-align: right;

  text {
    width: 14rpx;
    height: 14rpx;
    display: inline-block;
    border-top: 2rpx #0091ff solid;
    border-right: 2rpx #0091ff solid;
    transform: rotate(45deg);
  }
}

.header {
  width: 100%;
  top: 0;
  left: 0;
  position: sticky;
  z-index: 98;

  .tabs {
    width: 96%;
    padding: 0 2%;
    background-color: #ffffff;
    display: flex;
    //    position: sticky;
    // z-index: 99999;
    border-bottom: 2rpx #eee solid;

    &-item {
      height: 84rpx;
      line-height: 83rpx;
      margin: 0 20rpx;
      font-size: 26rpx;
      font-weight: 400;
      border-bottom: 4rpx solid #fff;
      color: #93b1c7;
      transition: 0.4s all;
    }

    .act {
      color: #0091ff;
      font-weight: bold;
      border-color: #0091ff;
      // font-size: 30rpx;
    }
  }
}

.roleBox {
  margin: 16rpx 20rpx;
  padding: 14rpx 20rpx 14rpx 0;
  background: #fff;
  border-radius: 8rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .roleCard {
    border-left: 4rpx solid #0091ff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .changeBtn {
    color: #0091ff;
    font-size: 24rpx;
    display: flex;

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.card {
  width: calc(100% - 40rpx);
  margin: 20rpx;
  background-color: #fff;

  &-title {
    padding: 20rpx;
    color: #333333;
    font-size: 30rpx;
    font-weight: bold;
    letter-spacing: 1rpx;
    display: flex;
    align-items: center;
  }

  .info-view {
    width: 100%;
    display: flex;
    align-items: center;

    &-item {
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      color: #999999;
      line-height: 42rpx;

      .num {
        font-size: 34rpx;
        font-weight: bold;
        color: #333;

        text {
          font-size: 30rpx;
        }
      }

      .red {
        color: #c01414;
      }
    }

    &-line {
      width: 2rpx;
      height: 60rpx;
      background-color: #eeeeee;
    }
   
  }

  .chartEmpty {
    height: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;

    image {
      width: 64rpx;
      height: 64rpx;
    }
  }
}

.red {
  color: #c01414;
}

.charts {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  // position: relative;
  .chartsContent {
    // position: relative;
    .ringTitle {
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      position: absolute;
      top: 80rpx;
      left: 80rpx;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

  .ring {
    width: 320rpx;
    height: 320rpx;
    padding: 20rpx;
    padding-bottom: 40rpx;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #999;
    justify-content: center;
    // background-color: #ccc;
  }

  .pie {
    width: 100%;
    height: 440rpx;
    padding: 10rpx 0;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #999;
    justify-content: center;
  }

  .charts-box {
    width: 320rpx;
    height: 320rpx;
    padding: 20rpx;
    padding-bottom: 40rpx;
    position: relative;

    .ring {
      width: 320rpx;
      height: 320rpx;
      padding: 0rpx;
      padding-bottom: 0rpx;
      // background-color: #ccc;
      text-align: center;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #999;
      justify-content: center;
    }

    .init-pie {
      width: 320rpx;
      height: 320rpx;
      padding: 0rpx;
      padding-bottom: 0rpx;
      position: absolute;
      z-index: 1;
      top: 20rpx;
      left: 20rpx;
      text-align: center;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #999;
      justify-content: center;
    }
  }

  .data-lable {
    width: calc(100% - 380rpx);
    padding-right: 20rpx;

    &-info {
      width: 100%;
      display: flex;
      align-items: center;

      &-item {
        flex: 1;
        text-align: center;
        font-size: 26rpx;
        color: #999999;
        line-height: 42rpx;

        .num {
          font-size: 34rpx;
          font-weight: bold;
          color: #333;

          text {
            font-size: 30rpx;
          }
        }

        .red {
          color: #c01414;
        }

        .name {
          width: 100%;
          display: flex;
          align-items: center;
          text-align: center;
          justify-content: center;

          .color {
            // background-color: #0091FF;
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            margin-right: 12rpx;
          }

          .text {
            text-align: center;
            flex: 1;
          }
        }
      }

      &-item:nth-child(1) {
        padding-right: 16rpx;
        flex: none;
      }

      .line {
        width: 2rpx;
        height: 60rpx;
        background-color: #eeeeee;
      }
    }

    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
      margin: 16rpx 0;
      color: #666666;

      .color {
        // background-color: #0091FF;
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        margin-right: 12rpx;
      }

      .name {
        width: calc(100% - 160rpx - 28rpx);
        overflow: hidden;
        text-overflow: ellipsis; //文本溢出显示省略号
        white-space: nowrap; //文本不会换行
      }

      .eleTotal {
        width: 70rpx;
        text-align: center;
        text-align: right;
      }

      .num {
        width: 90rpx;
        text-align: center;
        text-align: right;
      }
    }
  }
}

.detail {
  color: #0091ff;

  display: flex;
  align-items: center;

  justify-content: flex-end;
  align-items: center;
  padding: 0 30rpx 32rpx 0;

  .next {
    display: inline-block;
    width: 12rpx;
    height: 12rpx;
    margin-left: 10rpx;
    border-left: 3rpx #0091ff solid;
    border-top: 3rpx #0091ff solid;
    transform: rotate(135deg);
  }
}

.split-line {
  width: calc(100% - 40rpx);
  height: 2rpx;
  background-color: #eeeeee;
  margin: 0 auto;
}
.msg {
	width: 30rpx;
	height: 30rpx;
	margin-left: 8rpx;
	padding-top: 12rpx;
}
.tipsContent {
	width: 500rpx;
	text-align: left;
	white-space: pre-line;
	word-break: break-all;
}
/deep/ .zb_tooltip__popper {
	z-index: 99;
}

</style>
